<script>
export default {
  name: 'SkuEdit'
}
</script>
<script setup>
import { useProductStore } from '@/store/modules/product'
import { storeToRefs } from 'pinia'
import $API from '@/api/index'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

onMounted(() => {
  reqAttrInfoList()
  reqSpuSaleAttrList()
  reqSpuImageList()
})

const productStore = useProductStore()
const { categoryIdData, skuFormData } = storeToRefs(productStore)

// 获取对应的平台属性
const attrInfoList = ref([])
const reqAttrInfoList = async function () {
  const { id1: c1Id, id2: c2Id, id3: c3Id } = categoryIdData.value
  const result = await $API.product.attr.reqAttrInfoList(c1Id, c2Id, c3Id)
  if (result?.data?.code === 200) {
    attrInfoList.value = result.data.data

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 获取对应SpuId的销售属性
const saleAttrList = ref([])
const reqSpuSaleAttrList = async function () {
  const result = await $API.product.spu.reqSpuSaleAttrList(skuFormData.value.spuID)
  if (result?.data?.code === 200) {
    saleAttrList.value = result.data.data

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 获取对应SpuId的图片
const imageList = ref([])
const reqSpuImageList = async function () {
  const result = await $API.product.spu.reqSpuImageList(skuFormData.value.spuID)
  if (result?.data?.code === 200) {
    imageList.value = result.data.data

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 图片表格Ref
const imageTableRef = ref()

// 设置默认图片
const setSkuDefaultImg = function (row) {
  imageTableRef.value.clearSelection()
  imageTableRef.value.toggleRowSelection(row, true)
  skuFormData.value.skuDefaultImg = row.imgUrl
}

// sku保存函数
const saveSku = async function () {
  // 收集平台属性
  const attrInfoListData = attrInfoList.value.reduce((currentV, nextV) => {
    if (nextV.attrIdAndValueId) {
      const result = nextV.attrIdAndValueId.split(':')
      currentV.push({
        attrId: result[0],
        valueId: result[1]
      })
    }
    return currentV
  }, [])

  // 收集销售属性
  const saleAttrListData = saleAttrList.value.reduce((currentV, nextV) => {
    if (nextV.saleAttrIdAndValueId) {
      const result = nextV.saleAttrIdAndValueId.split(':')
      currentV.push({
        saleAttrId: result[0],
        saleAttrValueId: result[1]
      })
    }
    return currentV
  }, [])

  // 整合数据
  Object.assign(skuFormData.value, {
    skuAttrValueList: attrInfoListData,
    skuSaleAttrValueList: saleAttrListData
  })

  // 发请求保存
  const result = await $API.product.spu.reqSaveSkuInfo(skuFormData.value)
  if (result?.data?.code === 200) {
    ElMessage.success('sku保存成功')
    productStore.closeSkuEditor()
    return 'ok'
  } else {
    ElMessage.error('sku保存失败')
    return Promise.reject(result?.data?.message)
  }
}
</script>

<template>
  <div>
    <el-card class="marginTop20px">
      <el-form label-width="80px">
        <el-form-item label="sku名称">
          <el-input
            type="text"
            placeholder="sku名称"
            v-model="skuFormData.skuName"
          />
        </el-form-item>
        <el-form-item label="价格(元)">
          <el-input
            type="number"
            placeholder="价格(元)"
            v-model="skuFormData.price"
          />
        </el-form-item>
        <el-form-item label="重量(克)">
          <el-input
            type="number"
            placeholder="重量(克)"
            v-model="skuFormData.weight"
          />
        </el-form-item>
        <el-form-item label="sku描述">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="sku描述"
            resize="none"
            v-model="skuFormData.skuDesc"
          />
        </el-form-item>
        <el-form-item label="平台属性">
          <template
            v-for="(item, index) in attrInfoList"
            :key="index"
          >
            <span class="marginRight20px">
              <span class="marginRight20px">{{ item.attrName }}</span>
              <el-select
                class="width250px"
                v-model="item.attrIdAndValueId"
                value-key="id"
                placeholder="请选择属性"
                clearable
                filterable
              >
                <el-option
                  v-for="attrValueItem in item.attrValueList"
                  :key="attrValueItem.id"
                  :label="attrValueItem.valueName"
                  :value="`${item.id}:${attrValueItem.id}`"
                >
                </el-option>
              </el-select>
            </span>
          </template>
        </el-form-item>
        <el-form-item label="销售属性">
          <template
            v-for="(item, index) in saleAttrList"
            :key="index"
          >
            <span class="marginRight20px">
              <span class="marginRight20px">{{ item.saleAttrName }}</span>
              <el-select
                class="width250px"
                v-model="item.saleAttrIdAndValueId"
                value-key="id"
                placeholder="请选择属性"
                clearable
                filterable
              >
                <el-option
                  v-for="saleAttrValueItem in item.spuSaleAttrValueList"
                  :key="saleAttrValueItem.id"
                  :label="saleAttrValueItem.saleAttrValueName"
                  :value="`${item.id}:${saleAttrValueItem.id}`"
                >
                </el-option>
              </el-select>
            </span>
          </template>
        </el-form-item>
        <el-form-item label="图片名称">
          <el-table
            :data="imageList"
            ref="imageTableRef"
            border
            stripe
          >
            <el-table-column
              type="selection"
              width="50"
            />
            <el-table-column label="图片">
              <template #="{ row }">
                <img
                  class="height150px"
                  :src="row.imgUrl"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="imgName"
              label="名称"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template #="{ row }">
                <el-button
                  type="warning"
                  @click="setSkuDefaultImg(row)"
                  >设为默认</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="saveSku"
            >保存</el-button
          >
          <el-button @click="productStore.closeSkuEditor()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
// start
</style>
